<template>
  <div class='content'>
    <div class="my-form">
      <el-form ref="form" :model="formData" label-width="100px">
        <el-form-item class="bg" v-for="info in tabHead" :key="info.key" :label="info.label">
          <div v-if="info.key=='setMeal'">
            <div v-for="val in formData.setMeal">{{val}}</div>
          </div>
          <div v-else-if="info.key=='price'">
            <div v-for="val in formData.price">{{val}}</div>
          </div>
          <div v-else>{{formData[info.key]}} </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-box">
      <el-button type="primary">打印报表</el-button>
      <!--<el-button type="danger">申请驳回</el-button>-->
    </div>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        tabHead: [{
          key: 'id',
          label: '编号'
        },
          {
            key: 'shopName',
            label: '商家名'
          },
          {
            key: 'type',
            label: '商家类型'
          },

          {
            key: 'shop',
            label: '店铺名称'
          },
          {
            key: 'date',
            label: '申请时间'
          },
          {
            key: 'setMeal',
            label: '套餐'
          },
          {
            key: 'setMealTotal',
            label: '套餐总数'
          },
          {
            key: 'price',
            label: '单价'
          },
          {
            key: 'totalPrice',
            label: '总价'
          }
        ],
        formData: {
          id: 89757,
          data: '很多',
          shopName: '商家1',
          date: '2019-12-27',
          type: '商家寄存',
          shop: '咏春葱油饼',
          setMeal: ['套餐一:(库存一*5+库存二*10) X10 ', '套餐二:(库存一*12+库存二*20) X10'],
          setMealTotal:20,
          price:["套餐一: ¥10","套餐二: ¥50"],
          totalPrice:600
        },
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  @import '~@/styles/chow.scss'; //引入公共css类

  .my-form {
    width: 90%;
  }

  .bg {
    // border:1px solid red;
    margin: 0;
    min-height: 50px;
    position: relative;
    background-color: #FAFAFA;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    transition: .3s all;

    &-btn {
      position: absolute;
      right: 20px;
    }

    &:nth-child(2n) {
      // border:1px solid red;
      background-color: #FFF;
    }

    &:last-child {
      border-bottom: 1px solid #eee;
    }

    &:hover {
      background-color: #ecf5ff;
    }
  }
  .btn-box{
    margin-top: 50px;
    padding-left: 80px;
    box-sizing: border-box
  }
</style>
